<template>
  <div class="enterprise-service-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="万师傅企服" left-arrow @click-left="handleGoBack" />

    <!-- 企服 banner 区域 -->
    <div class="banner" :style="{ backgroundImage: `url(${bannerImg})` }">
      <h2 class="banner-title">万师傅企服</h2>
      <p class="banner-subtitle">专注于企业维修保养服务解决方案</p>
      <p class="banner-desc">助力企业降本增效</p>
      <div class="service-cards">
        <van-card
          class="service-card"
          title="办公维修"
          desc="办公室、办事处等"
        />
        <van-card
          class="service-card"
          title="门店维修"
          desc="连锁店铺、线下网点等"
        />
        <van-card
          class="service-card"
          title="便民服务"
          desc="物业小区、公寓等"
        />
        <van-card
          class="service-card"
          title="企业售后"
          desc="厂商/代理商品牌售后等"
        />
      </div>
    </div>

    <!-- 服务人员与主题引导 -->
    <div class="service-person">
      <van-image src="https://picsum.photos/600/300?random=10" fit="cover" />
      <div class="service-person-text">
        <h3>我们能提供什么服务？</h3>
      </div>
    </div>

    <!-- 维修改造服务区块 -->
    <div class="service-section">
      <h3 class="section-title">维修改造</h3>
      <div class="service-grid">
        <van-card
          class="grid-card"
          title="企业设施维修"
          :thumb="repairImg1"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="下水管道疏通"
          :thumb="repairImg2"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="办公用具安装维修"
          :thumb="repairImg3"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="电路拆除改造"
          :thumb="repairImg4"
          thumb-position="top"
        />
      </div>
    </div>

    <!-- 清洗保养服务区块 -->
    <div class="service-section">
      <h3 class="section-title">清洗保养</h3>
      <div class="service-grid">
        <van-card
          class="grid-card"
          title="企业设施清洗"
          :thumb="cleanImg1"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="除醛消杀"
          :thumb="cleanImg2"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="办公场所开荒保洁"
          :thumb="cleanImg3"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="沙发保养"
          :thumb="cleanImg4"
          thumb-position="top"
        />
      </div>
    </div>

    <!-- 拆旧搬家服务区块 -->
    <div class="service-section">
      <h3 class="section-title">拆旧搬家</h3>
      <div class="service-grid">
        <van-card
          class="grid-card"
          title="修锁换锁"
          :thumb="moveImg1"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="办公用具拆旧清运"
          :thumb="moveImg2"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="企业搬家"
          :thumb="moveImg3"
          thumb-position="top"
        />
        <van-card
          class="grid-card"
          title="办公设施移机安装"
          :thumb="moveImg4"
          thumb-position="top"
        />
      </div>
    </div>

    <!-- 优势展示区块 -->
    <div class="advantage-section">
      <h3 class="section-title">为什么选择我们？</h3>
      <div class="advantage-grid">
        <div class="advantage-item">
          <van-icon name="wrench" color="#1989fa" size="32" />
          <p>8年</p>
          <p>行业经验</p>
        </div>
        <div class="advantage-item">
          <van-icon name="location" color="#1989fa" size="32" />
          <p>365个</p>
          <p>城市覆盖</p>
        </div>
        <div class="advantage-item">
          <van-icon name="building" color="#1989fa" size="32" />
          <p>80W+</p>
          <p>企业用户</p>
        </div>
        <div class="advantage-item">
          <van-icon name="people" color="#1989fa" size="32" />
          <p>200W+</p>
          <p>师傅数</p>
        </div>
        <div class="advantage-item">
          <van-icon name="heart" color="#1989fa" size="32" />
          <p>7000W+</p>
          <p>累计服务次数</p>
        </div>
      </div>
    </div>

    <!-- 发展历程区块 -->
    <div class="history-section">
      <h3 class="section-title">万师傅发展历程</h3>
      <div class="timeline">
        <div
          class="timeline-item"
          v-for="(item, index) in historyList"
          :key="index"
        >
          <div class="timeline-year">{{ item.year }}</div>
          <div class="timeline-content">{{ item.content }}</div>
        </div>
      </div>
    </div>

    <!-- 咨询表单区块 -->
    <div class="form-section">
      <h3 class="section-title">想要了解更多？</h3>
      <p class="form-desc">请填写真实信息，我们将尽快与您联系！</p>
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.company"
          name="company"
          label="公司名称"
          placeholder="请输入公司名称"
          required
        />
        <van-field
          v-model="form.name"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          required
        />
        <van-field
          v-model="form.phone"
          name="phone"
          label="电话"
          type="tel"
          placeholder="请输入电话"
          required
        />
        <van-field
          v-model="form.demandType"
          name="demandType"
          label="需求类型"
          placeholder="请选择需求类型"
          :clickable="true"
          @click="showPicker = true"
          required
        />
        <van-field
          v-model="form.remark"
          name="remark"
          label="备注"
          type="textarea"
          rows="4"
          placeholder="请输入备注信息"
        />
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"
            >合作咨询</van-button
          >
        </div>
      </van-form>
      <van-popup
        :show="showPicker"
        @update:show="showPicker = $event"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="[demandTypes]"
          v-model="currentPickerIndex"
          @confirm="handlePickerConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import {
  NavBar,
  Card,
  Image,
  Icon,
  Form,
  Field,
  Button,
  Picker,
  Popup,
} from "vant";

export default {
  components: {
    VanNavBar,
    VanCard,
    VanImage,
    VanIcon,
    VanForm,
    VanField,
    VanButton,
    VanPicker,
    VanPopup,
  },
  setup() {
    // 图片资源（示例占位，实际需替换为真实地址）
    const bannerImg = ref("https://picsum.photos/1000/500?random=1");
    const repairImg1 = ref("https://picsum.photos/300/200?random=2");
    const repairImg2 = ref("https://picsum.photos/300/200?random=3");
    const repairImg3 = ref("https://picsum.photos/300/200?random=4");
    const repairImg4 = ref("https://picsum.photos/300/200?random=5");
    const cleanImg1 = ref("https://picsum.photos/300/200?random=6");
    const cleanImg2 = ref("https://picsum.photos/300/200?random=7");
    const cleanImg3 = ref("https://picsum.photos/300/200?random=8");
    const cleanImg4 = ref("https://picsum.photos/300/200?random=9");
    const moveImg1 = ref("https://picsum.photos/300/200?random=11");
    const moveImg2 = ref("https://picsum.photos/300/200?random=12");
    const moveImg3 = ref("https://picsum.photos/300/200?random=13");
    const moveImg4 = ref("https://picsum.photos/300/200?random=14");

    // 发展历程数据
    const historyList = ref([
      { year: "2013", content: "深圳市小亿网络有限公司正式创立" },
      { year: "2014", content: "正式开启“线上担保交易”" },
      { year: "2015", content: "成立“师傅大学”" },
      { year: "2016", content: "行业首创“先行赔付”上线" },
      { year: "2017", content: "TOC产品万师傅家庭版上线" },
      { year: "2018", content: "上线“一口价”下单模式" },
      { year: "2019", content: "荣获36氪“生活方式之王”" },
      { year: "2020", content: "万师傅获评为“诚信示范单位”" },
      {
        year: "2021",
        content: "获评全国工商联“家居业信用评价AAAAA级信用企业”",
      },
      {
        year: "2022",
        content: "万师傅APP上线，随时随地为个人家庭用户提供家居服务",
      },
    ]);

    // 表单数据
    const form = reactive({
      company: "",
      name: "",
      phone: "",
      demandType: "",
      remark: "",
    });

    // 需求类型选择器相关
    const demandTypes = ref([
      { text: "维修改造", value: "维修改造" },
      { text: "清洗保养", value: "清洗保养" },
      { text: "拆旧搬家", value: "拆旧搬家" },
      { text: "其他", value: "其他" },
    ]);
    const showPicker = ref(false);
    const currentPickerIndex = ref([0]);

    // 处理选择器确认
    const handlePickerConfirm = ({ selectedOptions }) => {
      form.demandType = selectedOptions[0]?.text || "";
      showPicker.value = false;
    };

    // 表单提交逻辑
    const onSubmit = (values) => {
      console.log("表单提交数据：", values);
      // 实际项目中可添加接口请求逻辑
    };

    // 返回上一页逻辑
    const handleGoBack = () => {
      history.back();
    };

    return {
      bannerImg,
      repairImg1,
      repairImg2,
      repairImg3,
      repairImg4,
      cleanImg1,
      cleanImg2,
      cleanImg3,
      cleanImg4,
      moveImg1,
      moveImg2,
      moveImg3,
      moveImg4,
      historyList,
      form,
      demandTypes,
      showPicker,
      currentPickerIndex,
      handlePickerConfirm,
      onSubmit,
      handleGoBack,
    };
  },
};
</script>

<style scoped>
.enterprise-service-page {
  background-color: #fff;
  min-height: 100vh;
}

/* Banner 区域样式 */
.banner {
  background-size: cover;
  background-position: center;
  padding: 24px 16px;
  color: #fff;
}

.banner-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
}

.banner-subtitle {
  font-size: 16px;
  margin-bottom: 8px;
}

.banner-desc {
  font-size: 14px;
  margin-bottom: 16px;
}

.service-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.service-card {
  flex: 1 1 calc(50% - 6px);
  background-color: rgba(255, 255, 255, 0.8);
  color: #333;
}

/* 服务人员区域样式 */
.service-person {
  position: relative;
}

.service-person img {
  width: 100%;
  height: auto;
}

.service-person-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

/* 服务区块通用样式 */
.service-section {
  padding: 24px 16px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.grid-card {
  flex: 1 1 calc(50% - 6px);
}

/* 优势区域样式 */
.advantage-section {
  background-color: #e6f7ff;
  padding: 24px 16px;
}

.advantage-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.advantage-item {
  text-align: center;
  margin: 8px;
}

.advantage-item p {
  margin: 4px 0;
}

/* 发展历程区域样式 */
.history-section {
  background-color: #f0f7ff;
  padding: 24px 16px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
}

.timeline-year {
  background-color: #1989fa;
  color: #fff;
  border-radius: 12px;
  padding: 4px 12px;
  margin-right: 12px;
  font-weight: bold;
}

.timeline-content {
  flex: 1;
  background-color: #fff;
  padding: 12px;
  border-radius: 8px;
}

/* 表单区域样式 */
.form-section {
  padding: 24px 16px;
  background-color: #f9f9f9;
}

.form-desc {
  text-align: center;
  margin-bottom: 16px;
  color: #666;
}
</style>
